<template>
  <div>
    <!-- vant搜索 -->
    <van-search @input="onInput" @search="onSearch" autofocus show-action shape="round" name="word" v-model="kw" placeholder="请输入需要查找的驾校名称">

        <template #left>
            <van-icon @click="back" style="margin-right: 5px;" size="22px" name="arrow-left" />
        </template>

        <template #action>
            <van-button @click="onSearch" round size="small" type="info" style="border-radius: 5px; font-size: 14px;">搜索</van-button>
        </template>

    </van-search>

    <!-- 搜索历史 -->
    <div v-show="isShow">
        <div class="search-host">
            <span>搜索记录：</span>
            <van-icon name="delete" @click="del"/>
        </div>

        <div>
            <van-tag v-for="(item,index) in kwList" :key="index" @click="searchTs(item)" style="margin: 5px;">{{item}}</van-tag>
        </div>
    </div>

    <!-- 搜索提示 -->
    <van-cell-group v-show="!isShow">
        <van-cell v-for="(item,index) in showList"
        :key="index"
        :title="item"
        @click="searchTs(item)"/>
    </van-cell-group>

  </div>
</template>

<script>
// import axios from 'axios'
import { homeInfo } from '@/api/home.js'
export default {
  data () {
    return {
      kw: '',
      isShow: true,
      list: [], // 所有数据
      showList: [], // 搜索提示数据
      kwList: [], // 搜索记录
      id: null,
      allList: []
    }
  },
  created () { // 初始化保存
    const kwlist = localStorage.kwList
    if (kwlist) {
      this.kwList = JSON.parse(kwlist)
    }
  },
  async mounted () {
    // axios.get('/search.json').then(res => {
    //   // console.log(res.data.data)
    //   this.list = res.data.data
    // })
    const dede = await homeInfo()
    const res = dede.data
    this.allList = res
    // this.id = res.id
    // console.log(this.id)
    this.list = res.map(v => v.name)
    // console.log(nameList)
  },
  methods: {
    back () { // 返回
      this.$router.push({
        path: '/'
      })
    },
    onInput () { // 搜索提示
      this.showList = []
      console.log(this.list)
      this.list.map(item => {
        if (item.includes(this.kw)) {
          this.showList.push(item)
        }
      })

      if (this.kw.trim() === '') { // 显示或隐藏搜索提示
        this.isShow = true
      } else {
        this.isShow = false
      }
    },
    searchTs (item) {
      const res = this.allList.find(v => item === v.name)
      this.id = res.id
      console.log(this.id)
      this.$router.push({
        name: 'detail', // 这里是你要跳转的路由path
        params: { id: this.id }
      })
      if (!this.kwList.includes(item)) { // 不会重复添加相同搜索记录
        this.kwList.push(item)
        localStorage.kwList = JSON.stringify(this.kwList)
      }
    },
    onSearch () { // 确定搜索或点击搜索时触发
      if (this.kw.trim() === '') { // 判断内容是否为空
        return
      }

      if (this.list.includes(this.kw)) {
        const res = this.allList.find(v => this.kw === v.name)
        if (res.id === undefined) {
          console.log(11)
          return
        }
        this.id = res.id
        console.log(this.id)
        this.$router.push({
          name: 'detail', // 这里是你要跳转的路由path
          params: { id: this.id }
        })

        if (!this.kwList.includes(this.kw.trim())) { // 不会重复添加相同搜索记录
          this.kwList.push(this.kw)
          localStorage.kwList = JSON.stringify(this.kwList)
        }
      } else {
        this.$toast.fail('没有该驾校哦，换个试试')
      }
    },
    del () { // 删除搜索记录
      this.$dialog.confirm({
        message: '确定要清空搜索记录吗？'
      }).then(() => {
        this.kwList = []
        localStorage.kwList = JSON.stringify(this.kwList)
      }).catch(() => {
        // on cancel
      })
    }

  }
}
</script>

<style lang="less" scoped>
.van-search__action{
    margin-top: -5px !important;
}
.search-host{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5px;
    box-sizing: border-box;
    span{
        font-size: 32px;
    }
}
</style>
